<template>
    <div class="templateList">
        <el-form 
            ref="ruleForm" 
            label-width="100px"
            :model="ruleForm"
            :rules="rules">
            <el-form-item label="小程序名称" prop="appid">
                <el-select v-model="ruleForm.appid" placeholder="请选择小程序名称"  @change="handleChange">
                    <el-option :label=item.appname :value=item.appid v-for="(item,index) in options" :key="index">{{item.appname}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文字1" prop="keyword1">  
                <el-input v-model="ruleForm.keyword1" placeholder="请输入文字1"></el-input>
            </el-form-item>
            <el-form-item label="文字2" prop="keyword2">  
                <el-input v-model="ruleForm.keyword2" placeholder="请输入文字2"></el-input>
            </el-form-item>
        </el-form>
       <el-button @click="submitForm('ruleForm')" size="medium" class="addSubimit">提交</el-button>
    </div>
</template>
<script>
import { AddData,getChannel } from '@/assets/js'
export default {
    data(){
        return {
            options:[],//选择小程序
            ruleForm:{
                appid:'',//小程序ID
                keyword1:'',//第一段文字
                keyword2:'',//二段文字
            },
            rules:{//验证
                keyword1:[
                    { required: true, message: '请输入文字1', trigger: 'blur' }
                ],
                keyword2:[
                    { required: true, message: '请输入文字2', trigger: 'blur' }
                ]
            }
        }
    },
    mounted:function(){
        getChannel(this)
    },
    methods:{
        handleChange(e){//选择小程序
             this.ruleForm.appid = e;
        },
        submitForm:function(e){//点击提交
            var data = {
                spid:this.ruleForm.appid,
                keyword1:this.ruleForm.keyword1,
                keyword2:this.ruleForm.keyword2
            }
            AddData(this,e,data,'template/addTemplate')
            
        }
    }
}
</script>
<style>

</style>
